<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <script src="javascript/vue.js"></script>
    <script src="javascript/jquery-3.3.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header {
        background-image: linear-gradient(-90deg, rgba(158, 235, 71, 0.1), rgba(158, 235, 71, 0.2));
        color: #333;
        line-height: 50px;
    }
</style>
<body>
<div id="vue">
    <el-container>
        <el-aside width="200px">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title">管理系统</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="openLink('showAllType.html', 'showAll')">分类管理
                        </el-menu-item>

                        <el-menu-item index="2-1" @click="openLink('showAllUnit.html', 'showAll')">单位管理
                        </el-menu-item>

                        <el-menu-item index="3-1" @click="openLink('showAllRegion.html', 'showAll')">区域管理
                        </el-menu-item>

                        <el-menu-item index="4-1" @click="openLink('showAllGoods.html', 'showAll')">商品管理
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
            <el-link :underline="false" @click="openLink('welcome.html', 'showAll')" icon="el-icon-s-home"
                     style="position: absolute; bottom: 20px; left: 20px;">回到首页
            </el-link>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px">

                <el-breadcrumb separator-class="el-icon-arrow-right"
                               style="position: absolute; top: 40px; left: 220px;">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ position }}</el-breadcrumb-item>
                </el-breadcrumb>

            </el-header>
            <el-main>
                <iframe name="showAll" src="welcome.html" width="100%" height="620" style="border:none;"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let v = new Vue({
        el: '#vue',
        data: {
            position: ''
        },
        methods: {
            openLink(url, target) {
                if (url === 'showAllType.html') this.position = '分类管理';
                else if (url === 'showAllUnit.html') this.position = '单位管理';
                else if (url === 'showAllRegion.html') this.position = '区域管理';
                else if (url === 'showAllGoods.html') this.position = '商品管理';
                else this.position = '';
                window.open(url, target);
            }
        }
    });
</script>
</html>